<template>
  <div class="container-class-tools">
    <div class="head">
      <span v-if="!showShapes" class="panelTitle">工具</span>
      <span v-if="showShapes" class="panelTitle  title-back" @click="handleShapesClick"
        @touchstart.prevent="handleShapesClick">
        <img :src="backIcon" class="back-icon" />
        返回</span>

      <div class="toolHeadRight">
        <span v-if="showShapes" class="clearBtn" @click.stop="clearCanvas"
          @touchstart.prevent.stop="clearCanvas">清空笔记</span>
        <img class="closeBtn" @click="handlePopoverClose" @touchstart.prevent="handlePopoverClose" :src="closeImg"
          alt="" />
      </div>
    </div>
    <div v-show="showGeneralTools">
      <div class="tool-box">
        <div class="tool-box-item" @click="handleMagnifierClick" @touchstart.prevent="handleMagnifierClick">
          <img :src="generalTool1" class="img" /><span class="info">放大镜</span>
        </div>
        <div class="tool-box-item" @click="handleSpotlightClick" @touchstart.prevent="handleSpotlightClick">
          <img :src="generalTool2" class="img" /><span class="info">聚光灯</span>
        </div>
        <div class="tool-box-item" @click="handleTimerClick" @touchstart.prevent="handleTimerClick">
          <img :src="generalTool3" class="img" /><span class="info">计时器</span>
        </div>
        <div class="tool-box-item" @click="handleScreenshotClick" @touchstart.prevent="handleScreenshotClick">
          <img :src="generalTool4" class="img" /><span class="info">截图</span>
        </div>
        <div class="tool-box-item" @click="handleShapesClick" @touchstart.prevent="handleShapesClick">
          <img :src="generalTool5" class="img" /><span class="info">形状</span>
        </div>
      </div>
      <div class="tool-box">
        <div class="tool-box-item" @click="handleCalculatorClick" @touchstart.prevent="handleCalculatorClick">
          <img :src="generalTool6" class="img" /><span class="info">计算器</span>
        </div>
        <div class="tool-box-item" @click="handleMindClick" @touchstart.prevent="handleMindClick">
          <img :src="generalTool8" class="img" /><span class="info1">思维导图</span>
        </div>
        <div class="tool-box-item" @click="handleFormulaClick" @touchstart.prevent="handleFormulaClick">
          <img :src="generalTool7" class="img" /><span class="info1">公式编辑器</span>
        </div>
        <div class="tool-lines">
          <span></span>
        </div>
        <div class="tool-box-item" @click="handleRandomRollCallClick" @touchstart.prevent="handleRandomRollCallClick">
          <img :src="generalTool9" class="img" /><span class="info">随机点名</span>
        </div>
        <div class="tool-box-item" @click="handleClassroomAssessmentClick"
          @touchstart.prevent="handleClassroomAssessmentClick">
          <img :src="generalTool10" class="img" /><span class="info1">课堂评价</span>
        </div>
      </div>
    </div>
    <div v-show="showShapes" class="svg-icontool-box">
      <!-- <div class="title-back">
       <span>返回</span>
      </div> -->
      <div class="svg-icons">
        <div v-for="(item, index) in items" :key="index" :class="{
          'tool-box-item-new': true,
          'tool-box-item-active': svgIndex === index,
        }" @click="handleSvgClick(item.svg, index)" @touchstart.prevent="handleSvgClick(item.svg, index)">
          <svg class="svg-icon" aria-hidden="true">
            <use :xlink:href="`#${item.svg}`" />
          </svg>
        </div>
      </div>
      <SizeColor mode="shape" @setcolor="handleSetColor" @setsize="handleSetSize" @close="handleSizeColorClose" />
    </div>

  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import generalTool1 from '../assets/teaching/fangdajing.png';
import generalTool2 from '../assets/teaching/juguangdeng.png';
import generalTool3 from '../assets/teaching/dingshiqi.png';
import generalTool4 from '../assets/teaching/jietu.png';
import generalTool5 from '../assets/teaching/xingzhuang.png';
import generalTool6 from '../assets/teaching/jisuanqi.png';
import generalTool7 from '../assets/teaching/gongshibianjiqi.png';
import generalTool8 from '../assets/teaching/siweidaotu.png';
import generalTool9 from '../assets/teaching/dianming.png';
import generalTool10 from '../assets/teaching/ketangpingjia.png';

import closeImg from '../assets/close.png';
import backIcon from '../assets/teaching/left-black.svg';

import SizeColor from './size-color.vue';
import { tourEmits } from 'element-plus';

import useStore from '../store';
import { storeToRefs } from 'pinia';
import { getSizeColor, setSizeColor } from '../utils/sizeColor';

const store = useStore();
const { config } = store;

const props = defineProps({
  svgClick: Function,
  setColor: Function,
  setSize: Function,
});

const emits = defineEmits(['close', 'open']);

const showGeneralTools = ref(true);
const showShapes = ref(false);
const showSizeColor = ref(false);
const svgIndex = ref('');
const items = ref([
  { svg: 'iconxuxian' },
  { svg: 'iconzhixian' },
  { svg: 'iconhuxian' },
  { svg: 'iconjiantou' },
  { svg: 'iconzhengfangxing' },
  { svg: 'iconpinghangsibianxing' },
  { svg: 'iconyuanjiaojuxing' },
  { svg: 'iconjuxing' },
  { svg: 'icontixing' },
  { svg: 'iconlingxing' },
  { svg: 'icondengbiansanjiaoxing' },
  { svg: 'icondengyaosanjiaoxing' },
  { svg: 'iconwubianxing' },
  { svg: 'iconliubianxing' },
  { svg: 'iconyuan' },
  { svg: 'iconbanyuan' },
  { svg: 'icontuoyuan' },
  { svg: 'iconduihuakuang' },
  { svg: 'iconxingxing' },
]);

// const selectedColor = ref('#F54B00');
// const selectedSize = ref(4);

const clearCanvas = () => {
  emits('clearCanvas');
}

// 关闭弹窗
const handlePopoverClose = () => {
  emits('close');
};
// 打开放大镜, 传参 magnifyingGlass
const handleMagnifierClick = () => {
  emits('open', 'magnifyingGlass');
};
// 打开聚光灯, 传参 spotlight
const handleSpotlightClick = () => {
  emits('open', 'spotlight');
};

// 打开计时器，传参 timer
const handleTimerClick = () => {
  emits('open', 'timer');
};
// 截图
const handleScreenshotClick = () => {
  emits('open', 'screenshot');
};

const handleSizeColorClose = () => {
  showSizeColor.value = false;
};

// 打开计算器，传参 calculator
const handleCalculatorClick = () => {
  emits('open', 'calculator');
};
// 打开思维导图，传参 mind
const handleMindClick = () => {
  emits('open', 'mind');
};
// 打开公式formula
const handleFormulaClick = () => {
  emits('open', 'formula');
};
// 打开随机点名
const handleRandomRollCallClick = () => {
  emits('open', 'randomrollCall');
};
// 打开课堂评价
const handleClassroomAssessmentClick = () => {
  emits('open', 'classroomassessment');
};

// 更改图形大小
const handleSetSize = (value) => {
  const deep = getSizeColor('brushSvg');
  deep.size = value;
  setSizeColor('brushSvg', deep);
  handleSvgClick(selectedIcon.value, svgIndex.value);
};
// 更改图形颜色
const handleSetColor = (value) => {
  const deep = getSizeColor('brushSvg');
  deep.color = value;
  setSizeColor('brushSvg', deep);
  handleSvgClick(selectedIcon.value, svgIndex.value);
};
// 选中的图形
const selectedIcon = ref();
const handleSvgClick = (icon, index) => {
  selectedIcon.value = icon;
  // 选中的图形icon
  const deep = getSizeColor('brushSvg');
  deep.icon = icon;
  setSizeColor('brushSvg', deep);
  // 选中的图形下标
  svgIndex.value = index;
  showSizeColor.value = true;
  props.svgClick(icon, deep.color, deep.size);
};

// Toggle shapes view
const handleShapesClick = () => {
  svgIndex.value = '';
  showSizeColor.value = false;
  showGeneralTools.value = !showGeneralTools.value;

  showShapes.value = !showShapes.value;
  if (!showGeneralTools.value) {
    // 选择图形
    emits('open', 'shapes');
    // 点击形状
    showSizeColor.value = true;
  }
};

// 回显图形配置
onMounted(() => {
  const deep = getSizeColor('brushSvg');
  config.setConfig(deep);
});
</script>

<style lang="scss">
.container-class-tools {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0px 0px 0.974em 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  background: rgba(241, 241, 241, 1) !important;
  backdrop-filter: blur(20px);

  .head {
    display: flex;
    align-items: center;
    padding: 16px;

    .panelTitle {
      height: 28px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #281506;
    }

    .title-back {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      cursor: pointer;
      // border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 16px;
        margin-right: 5px;
      }
    }

    .toolHeadRight {
      display: flex;
      margin-left: auto;

      .clearBtn {
        width: 88px;
        height: 32px;
        border-radius: 36px;
        display: block;
        border: 1px solid #ff581b;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #ff581b;
        line-height: 20px;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
      }

      .closeBtn {
        width: 32px;
        height: 32px;
      }
    }
  }

  .triangle-border-down_1 {
    display: block;
    width: 0px;
    height: 0;
    border-width: 28px 20px 0;
    border-style: solid;
    border-color: #fff transparent transparent;
    position: absolute;
    right: 210px;
    bottom: -20px;
  }

  .close-style {
    width: 16px;
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
  }

  .title {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin-top: 11px;
    margin-left: 16px;
  }

  .svg-icontool-box {
    // border: 1px solid red;
    display: flex;
    flex-direction: column;

    .svg-icons {
      display: flex;
      flex-wrap: wrap;
      // border: 1px solid red;

      .tool-box-item-new {
        width: 45px;
        height: 45px;
        // border: 1px solid rgb(126, 126, 126);
        background: rgba(242, 242, 242, 1);
        border-radius: 2px;
        margin-left: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        // border: 1px solid red;

        .svg-icon {
          width: 24px;
          height: 24px;
          // margin: 8px 8px;
        }
      }

      .tool-box-item-active {

        background: #fc8b09;

        .svg-icon {
          fill: #fff;
        }
      }
    }
  }


  .tool-box {
    display: flex;
    padding: 0 16px 16px 0;

    .tool-box-item {
      width: 85px;
      height: 85px;
      display: flex;
      flex-direction: column;
      justify-self: center;
      align-items: center;
      margin-left: 10px;
      padding: 10px;
      border-radius: 10px;
      box-sizing: border-box;

      .tool-box-item:hover {
        background: rgba(252, 139, 9, 0.15);
      }

      .tool-box-item-active {
        background: rgba(252, 139, 9, 0.15);
      }

      .img {
        cursor: pointer;
        width: 40px;
        height: 40px;
      }

      span {
        margin-top: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 17px;
      }
    }

    .tool-lines {
      display: flex;
      flex: 1;
      // border: 1px solid red;
      justify-content: center;
      align-items: center;

      span {
        display: block;
        width: 1px;
        height: 48px;
        background: #CCCCCC;
      }
    }

    .tool-box-item:hover {
      background: rgba(252, 139, 9, 0.15);
    }
  }
}

.title2 {
  margin: 11px 0 15px 16px;
  display: flex;
  cursor: pointer;

  .fanhui {
    width: 16px;
    height: 16px;
  }

  span {
    line-height: 16px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
  }
}

/* 第二个弹框common-box样式 */
.common-box2 {
  width: 32px;
  height: 32px;
  background: rgba(242, 242, 242, 1);
  border-radius: 2px;
  margin-left: 16px;
  margin-bottom: 16px;
  display: -webkit-inline-box;
  cursor: pointer;

  .my-svg-icon {
    width: 15px;
    height: 15px;
    margin: 8px 8px;
  }
}

.common-box2-svg-active {
  .my-svg-icon {
    color: #fc8b09;
  }
}
</style>
